<template>
  <div class="cord">
    <div style=" margin-top: 5vh; margin-left: 10vw; width: 40vw;">
      <div style="height: 10vh;">

      </div>
        <el-form-item style="font-size: large;" label="类别：">
            <el-select placeholder="请选择" v-model="type">
              <el-option v-for="type in goodsTypeListData" :label="type.name" :value="type.id" :key="type.id"></el-option>
            </el-select>
          </el-form-item>

        <div class="mb-3">
            <div for="name" class="form-label">书名</div>
            <input v-model="name" type="text" class="form-control"  aria-describedby="请输入书名">
        </div>

        <div class="mb-3">
            <div for="number" class="form-label">数量</div>
            <input v-model="number" type="text" class="form-control" aria-describedby="请输入数量">
        </div>

        <div class="mb-3">
            <div for="photo" class="form-label">图片</div>
            <input v-model="photo" type="text" class="form-control" aria-describedby="请输入图片地址">
        </div>

        <button type="submit" @click="add()" class="btn btn-dark">添加</button>
          
   </div>


     
</div>
  
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";
  
  export default{
      setup(){
          const store = useStore();
          let name = ref('');
          let number = ref('');
          let photo = ref('');
          let type = ref({});
          const goodsTypeListData = ref([
              { id:1,name:"计算机类"},{id:2,name:"科学类"},{id:3,name:"数学类"}
          ])

          const add =()=>{
                $.ajax({
                    url:"http://localhost:3000/api/book/add/",
                    type:"post",
                    headers:{
                        Authorization: "Bearer "+store.state.user.token,//授权 
                        //Authentication 认证  
                    },
                    data:{
                      name:name.value,
                      number:number.value,
                      photo:photo.value,
                      type:type.value
                    },
                    success(resp){
                      if(resp.error_message === 'success'){
                        name.value=''
                        photo.value=''
                        number.value=''
                      }              
                    }
                 })
            }
          return{
            name,
            number,
            photo,
            type,
            goodsTypeListData,
            add,
          }

      }
    }
</script>

<style scoped>
.cord{
  width: 60vw;
  height: 60vh;
  margin-top: 10vh;
  margin-left: 20vw;
  background-color: white;
  border-radius: 15%;
  margin-bottom: 10vh;
}
</style>